package showcase

import (
	"github.com/templui/templui/internal/components/button"
	"github.com/templui/templui/internal/components/dialog"
)

templ DialogStandalone() {
	<div class="space-y-4">
		// Trigger for standalone dialog
		@dialog.Trigger(dialog.TriggerProps{
			For: "standalone-dialog",
		}) {
			@button.Button(button.Props{
				Variant: button.VariantOutline,
			}) {
				Open Standalone Dialog
			}
		}
		// Standalone dialog content without wrapper
		@dialog.Content(dialog.ContentProps{
			ID:    "standalone-dialog",
			Open:  false,
			Class: "max-w-md",
		}) {
			@dialog.Header() {
				@dialog.Title() {
					Standalone Dialog
				}
				@dialog.Description() {
					This dialog content works without a wrapper component.
				}
			}
			<p class="text-sm">
				Perfect for dynamic content loading with HTMX or similar frameworks.
			</p>
			@dialog.Footer() {
				@dialog.Close(dialog.CloseProps{
					For: "standalone-dialog",
				}) {
					@button.Button() {
						Close
					}
				}
			}
		}
	</div>
}
